<!DOCTYPE html>
<html xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	layout:decorate="~{common/layout}">

<head>
	<meta charset="UTF-8">
	<title>在线测验系统</title>
	<style scoped lang="less">

	</style>
</head>

<body>
	<div layout:fragment="fragment_body">
		<van-row>
			<van-search v-model="query.title" show-action :clearable="false" placeholder="请输入搜索标题">
				<template #action>
					<div>
					<van-button @click="onSearch" size="small" plain type="default">搜索</van-button>
					<!--<van-button @click="openChapter" icon="plus" v-show="query.type == 1" size="small" plain type="info">创建</van-button>-->
					</div>
				</template>
			</van-search>
			<!--<van-tabs v-model="query.type" @click="onClickTab">
			  <van-tab title="章节练习" name="0"></van-tab>
			  <van-tab title="测验测试" name="1"></van-tab>
			</van-tabs>-->
		</van-row>
		<van-row>
			<van-cell  @click="toDetail(chapter)" center :title="chapter.chapterTitle" 
			:label="showLabel(chapter)"
			 v-for="chapter in chapters" :key="chapter.chapterId">
				<template #right-icon>
			    	<div>
			    	<van-tag size="mini" plain type="warning" v-if="chapter.record != null && chapter.record.recordStatus*1 === 0" >未提交</van-tag>
			    	<van-tag size="mini" plain type="danger" v-if="chapter.record != null && chapter.record.recordStatus*1 === 1" >暂存中</van-tag>
			    	<van-tag size="mini" plain type="success" v-if="chapter.record != null && chapter.record.recordStatus*1 === 2" >已提交</van-tag>
			    	<van-tag size="mini" plain type="primary" v-if="chapter.record == null" >进入训练</van-tag>
			    	<br><span v-if="chapter.record != null && chapter.record.recordStatus*1 !== 2" >{{jindu(chapter, chapter.record)}}</span>
			    	</div>
			    </template>
			</van-cell>
			<van-empty v-if="chapters == null || chapters.length == 0" description="暂无数据" />
		</van-row>
		<!--弹框-->
		<el-dialog
		  title="新建测验"
		  :visible.sync="chapterForm.visible"
		  width="90%" :close-on-click-modal="false" :close-on-press-escape="false">
		  <el-form :model="chapterForm" :rules="chapterRules" ref="chapterForm" label-width="80px">
			  <el-form-item label="标题" prop="chapterTitle">
			    <el-input v-model="chapterForm.chapterTitle"></el-input>
			  </el-form-item>
			  <el-form-item label="数量" prop="chapterCount">
			    <el-input v-model="chapterForm.chapterCount"></el-input>
			  </el-form-item>
			</el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="closeChapter">取 消</el-button>
		    <el-button type="primary" @click="saveChapter">开始测验</el-button>
		  </span>
		</el-dialog>
	</div>
</body>
<script type="text/javascript" layout:fragment="fragment_script">
	let vueData = {
		chapters: [],
		query:{
			type: 0,
			accountId: getLoginId(),
			title: '',
		},
		chapterForm: {
			visible: false,
			chapterTitle: '',
			chapterCount: '',
			chapterType: 1,
			chapterAccountId: getLoginId()
		},
		chapterRules: {
          chapterTitle: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          chapterCount: [
            { required: true, message: '请输入', trigger: 'blur' }
          ]
        },
	}
	let vueComputed = {
		
	}
	let vueMethods = {
		onSearch(){
			let that = this
			console.log(that.query.title)
			if(!that.query.title){
				that.getChapters();
			}else{
				const res = _.filter(that.chapters, function(obj) {
					return obj.chapterTitle.includes(that.query.title);
				});
				console.log(res)
				that.chapters = res
			}
		},
		onClickTab(name, title) {
			let that = this
	      	that.getChapters();
	    },
		getChapters() {
			let that = this
			postRequst('/user/getChapters', that.query, true).then(function (resp) {
				that.chapters = resp.rows
			})
		},
		showLabel(chapter){
			if(chapter.chapterType*1 == 0){
				return chapter.topicCount + '道题，'+chapter.recordCount+'人已完成'
			}else{
				return chapter.topicCount + '道题'
			}
		},
		toDetail(chapter){
			let that = this
			const dd = {
				accountId: getLoginId(),
				chapterId: chapter.chapterId
			}
			postRequst('/user/initRecord', dd, true).then(function (resp) {
				if(resp.data){
					window.location.href = '/user/answer?rId=' + resp.data.recordId + '&index=0'
				}else{
					if(resp.msg === '请登录'){
						window.location.href = '/user/login'
					}else{
						that.$toast.fail(resp.msg);
					}
				}
			})
		},
		openChapter(row){
			let that = this
			if(!getLoginId()){
				that.$toast.fail('请登录');
				return false
			}
			if(row){
				that.chapterForm.chapterId = row.chapterId
				that.chapterForm.chapterTitle = row.chapterTitle
				that.chapterForm.chapterCount = row.chapterCount
			}else{
				that.chapterForm.chapterId = ''
				that.chapterForm.chapterTitle = ''
				that.chapterForm.chapterCount = ''
			}
			that.chapterForm.visible = true
		},
		saveChapter() {
			let that = this
			this.$refs['chapterForm'].validate((valid) => {
				if (valid) {
					postRequst('/user/saveChapter', that.chapterForm).then(function (resp) {
						if(resp.status == 0){
							that.getChapters()
							that.chapterForm.visible = false
							that.$message({message: resp.msg, type: "success"});
						}else{
							that.$message({message: resp.msg, type: "error"});
						}
					})
				}
			});
		},
		closeChapter() {
			this.$refs['chapterForm'].resetFields();
			this.chapterForm.visible = false
		},
		jindu(chapter, record) {
			if(chapter.submitCount*1 === 0 || chapter.topicCount*1 === 0){
				return  '0%';
			}
			let v = (((chapter.submitCount*1)/chapter.topicCount*1)*100).toFixed(2) + '%';
			return v
		},
	}
	function vueCreated() {
		let that = this
		that.query.type = GetQueryString('type')
		if(!that.query.type){
			that.query.type = 0
		}
		setTimeout(function(){that.getChapters()}, 100);
	}
</script>

</html>